<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		<view class="top-background" v-if="platfrom!=='TOUTIAO'"></view>
		<view class="status_nav" v-if="platfrom!=='TOUTIAO'" :style="'height:' + statusBarHeight + 'px;'" :class="{'backClass':scrollFlag}"></view>
		<view v-if="platfrom!=='TOUTIAO'" :class="{'backClass':scrollFlag}" :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'" class="Index_tab_top">
			<view class="scan-box">
				<image src="../../static/mine/img1.png" mode="aspectFill" @click="WeixinServer()"></image>
			</view>
			<view class="title"></view>
		</view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'height:'+ (titleBarHeight+statusBarHeight) +'px;'"></view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'width: 100vw;height:'+ (titleBarHeight+statusBarHeight +175)+'px;position: fixed;top: 0;z-index:-1;'">
			
		</view>
		
		<!-- 个人信息 -->
		<view class="information">
			<view class="left" v-if="mineInfo.mobile">
				<image :src="mineInfo.avatar" mode="aspectFill" class="img"></image>
				<view class="detail">
					<view class="name">
						{{mineInfo.nickname}}
					</view>
					<view class="desc">
						开启商圈消费新方式，消费省钱还赚钱
					</view>
				</view>
			</view>
			
			<view class="left" v-if="!mineInfo.mobile">
				<image src="https://imgs.ynz666.com/test/2025/01/08/MzQ3MGEyMWE3NzYwNmM4N2Y2M2VjNGRkZWJhNGNhMzA=.png" mode="aspectFill" class="img"></image>
				<view class="detail">
					<view class="name">
						欢迎你来
					</view>
					<view class="desc">
						开启商圈消费新方式，消费省钱还赚钱
					</view>
				</view>
			</view>
			
			<view class="right">
				<view v-if="!mineInfo.mobile">
					登录
				</view>
				<button v-if="!mineInfo.mobile && mineInfo.mobile.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
			</view>
		</view>
		
		<!-- 会员 -->
		<view class="member" v-if="mineInfo.memberStatus==2">
			<image src="https://imgs.ynz666.com/test/2025/01/21/NTVlMmUwZjliMThmMjM5ZGRkNzg4Y2RhNzA3ZmQwYTc=.png" mode="aspectFill" class="member_img"></image>
			<view class="member_box">
				<view class="men_top">
					<view class="left">
						<image src="../../static/mine/img12.png" mode="aspectFill" class="img"></image>
						<view class="name">
							月卡会员
						</view>
					</view>
					<view class="right">
						<view class="btn" @click="openPage('equityList',3)">
							免费权益
						</view>
						<view class="btn">
							积分返现
						</view>
					</view>
				</view>
				<view class="xhx"></view>
				<view class="cen">
					<view class="left">
						有效期至{{mineInfo.expireTime}}
					</view>
					
					<view class="right" @click="openPage('member',3)">
						立即续费
					</view>
				</view>
				<view class="bot">
					<view class="left">
						独乐乐不如众乐乐，送好友会员
					</view>
					<view class="right" @click="openPage('member',3)">
						赠好友
					</view>
				</view>
			</view>
		</view>
		
		<!-- 非会员 -->
		<view class="nonmember" v-if="mineInfo.memberStatus==1">
			<view class="module"></view>
			<view class="privilege">
				<view class="privilege_box">
					<view class="above">
						<view class="left">
							<view class="name">
								休闲吧特权会员
							</view>
							<view class="desc">
								能吃能喝能玩
							</view>
						</view>
						<view class="right">
							<view class="right_btn"  @click="openPage('member',3)">
								去开通
							</view>
							
							<button v-if="!mineInfo.mobile && mineInfo.mobile.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
						</view>
					</view>
					<view class="below">
						<view class="left">
							<view class="item">
								<view class="item_box">
									<image src="../../static/mine/img2.png" mode="aspectFill" class="img"></image>
									<view class="text">
										平台所有会员权益商户免费
									</view>
								</view>
							</view>
							<view class="item">
								<view class="item_box">
									<image src="../../static/mine/img3.png" mode="aspectFill" class="img"></image>
									<view class="text">
										消费团购赚积分 积分当钱花
									</view>
								</view>
							</view>
							<view class="item">
								<view class="item_box">
									<image src="../../static/mine/img4.png" mode="aspectFill" class="img"></image>
									<view class="text">
										分享团购赚取佣金
									</view>
								</view>
							</view>
						</view>
						<view class="right">
							<swiper class="plat_swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500" @change='changeCurrentPlat'>
								<swiper-item v-for="(item,index) in likeAllList" >
									<view class="swiper-item">
										<view class="b_box">
											<view class="item" v-for="(itemA,indexA) in item" :key="indexA" @click="jumpDetil(1,itemA.id)">
												<image src="https://imgs.ynz666.com/test/2025/01/08/ZGJkMzIzOTYwNTNjNjdjZjYyZjg2ZDZhZjM3OWI2NmE=.png" mode="aspectFill" class="bg_img"></image>
												<view class="item_box">
													<view class="mk"></view>
													<view class="shop">
														<image :src="itemA.mainImage[0]" mode="aspectFill" class="img"></image>
														<view class="name">
															{{itemA.nameNew}}
														</view>
													</view>
													<view class="free">
														会员免费
													</view>
												</view>
											</view>
											</view>
										</view>
								</swiper-item>
							</swiper>
							<!-- <view class="item" v-for="(itemA,indexA) in 2" :key="indexA">
								<image src="https://imgs.ynz666.com/test/2025/01/08/ZGJkMzIzOTYwNTNjNjdjZjYyZjg2ZDZhZjM3OWI2NmE=.png" mode="aspectFill" class="bg_img"></image>
								<view class="item_box">
									<view class="mk"></view>
									<view class="shop">
										<image src="https://imgs.ynz666.com/2024/9/6/comment/1725592867631.png" mode="aspectFill" class="img"></image>
										<view class="name">
											一点点波霸奶茶
										</view>
									</view>
									<view class="free">
										会员免费
									</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>
				
			</view>
			<view class="mer_banner">
					<image src="../../static/mine/img5.png" mode="aspectFill" class="left"></image>
					<view class="right">
						<swiper :indicator-dots="false" vertical="true" circular='true' :autoplay="true" :interval="3000" :duration="1000"  @change='changeCurrentBanner'>
						 <swiper-item v-for="(item , index) in purchaseList" :key="index">
							<image src="https://imgs.ynz666.com/2024/9/6/comment/1725592867631.png" mode="aspectFill" class="img"></image>
							<view class="fot_rtext">
								{{item.nameNew}}刚刚买了{{item.shopNew}}
							</view>
						 </swiper-item>
						</swiper>
					</view>
			</view>
		</view>
		
		
		
		<!-- 订单模块 -->
		<view class="order" v-if="mineInfo.mobile">
			<view class="order_box">
				<view class="item" @click="openPage('orderAll',3)">
					<view class="item_top">
						<image src="../../static/mine/img9.png" mode="aspectFill" class="img"></image>
						<view class="name">
							我的订单
						</view>
					</view>
					<view class="item_bot">
						{{mineInfo.orderCount}}
					</view>
					<view class="item_fot">
						待使用
					</view>
				</view>
				<view class="item">
					<view class="item_top">
						<image src="../../static/mine/img10.png" mode="aspectFill" class="img"></image>
						<view class="name">
							我的积分
						</view>
					</view>
					<view class="item_bot">
						{{mineInfo.integral}}
					</view>
					<view class="item_fot">
						可消费
					</view>
				</view>
				<view class="item">
					<view class="item_top">
						<image src="../../static/mine/img11.png" mode="aspectFill" class="img"></image>
						<view class="name">
							分享收益
						</view>
					</view>
					<view class="item_bot">
						{{mineInfo.shareProfit}}
					</view>
					<view class="item_fot">
						可提现
					</view>
				</view>
			</view>
		</view>
		
		<!-- 激活入口 -->
		<view class="activate">
			<image src="https://imgs.ynz666.com/test/2025/03/11/OWM4MmIxMzU5OTM0ODJmYTFhNjNlMjcwMjY3NThiNjQ=.png" mode="aspectFill" class="img" @click="goActivate"></image>
			<button v-if="!mineInfo.mobile && mineInfo.mobile.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumberTwo"></button>
		</view>
		
		
		<!-- 功能模块 -->
		<view class="feature">
			<view class="feature_box">
				<view class="item"  @click="openPage('addressList',2)">
					<view class="left">
						<image src="https://imgs.ynz666.com/2025/05/20/NTcxYTYzN2RiOWVkNjgwOGQxYjQwNTYwMjA0MGJlZjQ=.png" mode="aspectFill" class="img"></image>
						<view class="name">
							收货地址
						</view>
					</view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
				</view>
				<view class="item" @click="WeixinServer()">
					<view class="left">
						<image src="https://imgs.ynz666.com/2025/05/20/NDg3ZjMzMTAwNjcxYjBiYTlhNzEzOGEyNzkxMjZlNjc=.png" mode="aspectFill" class="img"></image>
						<view class="name">
							招商加盟
						</view>
					</view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
				</view>
				<!-- <view class="item" @click="jumpToOfficialAccount()">
					<view class="left">
						<image src="../../static/mine/img7.png" mode="aspectFill" class="img"></image>
						<view class="name">
							加入公众号
						</view>
					</view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
				</view> -->
				<view class="item" @click="JumpPage('userinfo')">
					<view class="left">
						<image src="https://imgs.ynz666.com/2025/05/20/ODM5Y2ExYTJkOGQ5YTQ5MzlkM2FhNDc3YWNiODNkZGY=.png" mode="aspectFill" class="img"></image>
						<!-- ../../static/mine/img8.png -->
						<view class="name">
							设置
						</view>
					</view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
				</view>
				
				<!-- <view class="item" @click="goActivate">
					<view class="left">
						<image src="../../static/mine/img7.png" mode="aspectFill" class="img"></image>
						<view class="name">
							扫码开会员
						</view>
					</view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
				</view> -->
			</view>
		</view>
		
		
		
		<customTabbar :curNav="4" :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView'></customTabbar>
		
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		getSecKillList,
	} from '../../apis/index.js';
	import {
		apiPointSeuityList,
	} from '../../apis/my.js';
	
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import loading from '../../components/loading/loading.vue';
	
	export default {
		data() {
			return {
				loading:true,
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				mineInfo:{},
				scrollFlag:false,
				latitude: 0,
				longitude: 0,
				
				purchaseList:[
					{
						img:'',
						name:'徐点点不滴',
					  shop:'一点点经典口味波霸奶绿大杯'
					},
					{
						img:'',
						name:'刘打打飞',
					  shop:'明星不错大大大一样'
					}
				],//购买人轮播信息
				
				currentBanner:0,
				currentplat:0,
				likeAllList:[],//会员免费列表
			}
		},
		components: {
			customTabbar,
			loading
		},
		onPageScroll(e){
			if(e.scrollTop>0){
				this.scrollFlag = true;
			}
			if(e.scrollTop<=0){
				this.scrollFlag = false;
			}
		},
		onShow() {
			uni.hideTabBar();
			this.getUserInfo();
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			
		},
		onLoad(){
			this.latitude = app.globalData.latitude;
			this.longitude = app.globalData.longitude;
			
			this.purchaseList=this.purchaseList.map((item)=>{
				return Object.assign({},item,{
					nameNew:item.name.slice(0,1)+'***'+item.name.slice(-1),
					shopNew:item.shop.slice(0,2)+'***'+item.shop.slice(-2)
				})
			})
			this.getListLikeAll();
		},
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		methods: {
			goActivate(){
				uni.navigateTo({
					url: '/pageE/activate/activate',
				});
			},
			chunkArray(array, size) {
			    if (array.length <= size) {
			        return [array];
			    }
			    return [array.slice(0, size), ...this.chunkArray(array.slice(size), size)];
			},
			// 手机号授权
			onGetPhoneNumber(e){
				console.log(e,"eeeee")
				let that = this;
				app.GetMobile(e,function(e){
					
					that.getUserInfo();
					
				});
			},
			onGetPhoneNumberTwo(e){
				let that = this;
				app.GetMobile(e,function(e){
					that.goActivate();
				
				});
			},
			jumpToOfficialAccount() {
			  const officialAccountUrl = 'https://mp.weixin.qq.com/s/your-official-account-article-url';
			      
			  uni.navigateTo({
			    url: `/pages/agreement/agreement?url=${encodeURIComponent(officialAccountUrl)}`
			  });
			},
			changeCurrentBanner(i) {
				this.currentBanner = i.detail.current;
			},
			changeCurrentPlat(i) {
				this.currentplat = i.detail.current;
			},
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					that.loading=false
					uni.setStorageSync('mineInfo', lRes);
				})
			},
			// 接入微信客服
			WeixinServer() {
				console.log("打开客服")
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
			getListLikeAll() {
							var that = this;
							const hotParms = {
								page: 1,
								pageSize: 10,
								lng: that.longitude,
								lat:that.latitude,
								pagination:true
							}
							apiPointSeuityList(hotParms).then(res => {
								switch (res.code) {
									case 0:
										// that.loading = false;
										const chunk = (arr, size) => Array.from({
												length: Math.ceil(arr.length / size)
											}, (v, i) =>
											arr.slice(i * size, i * size + size)
										);
										that.total_page = res.data.totalCount;
										
										that.likeAllList =chunk(res.data.list
										.map((item)=>{
											return Object.assign({}, item, {
												nameNew:item.name.length>4?item.name.slice(0,4):item.name
												// nameNew:item.name
											})
										})
										, 2);
										
										
										console.log(that.likeAllList, "会员权益列表")
										break;
									default:
										that.likeAllList = [];
										uni.showToast({
											title: res.message,
											icon: 'none'
										})
										break;
								}
							})
			},
			// 跳转
			JumpPage(page) {
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '/pages/' + page + '/' + page
						})
						break;
					default:
						uni.navigateTo({
							url: `../${page}/${page}`
						})
						break;
				}
			},
			// 跳转团购详情
			jumpDetil(type,id){
				switch (type) {
					case 1:
						uni.navigateTo({
							url: `/pageC/pointEquity/pointEquity?store_id=${id}`
						})
						break;
					case 2:
					  uni.navigateTo({
					  	url: `/pageC/pointGroup/pointGroup?store_id=${id}`
					  })
					  break;
					default:
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	padding-bottom: 300rpx;
	.top-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 622rpx;
		z-index: -1;
		// background: linear-gradient( #FFD3DB,#fff);
		background: linear-gradient( #FFD3DB,#f9f9f9);
		// background: radial-gradient( 43% 146% at 92% 8%, #FFD3DB 0%, rgba(255,244,243,0) 100%);
		// opacity: 0.5;
		// filter: blur(20rpx);
		border-radius: 0 0 20rpx 20rpx;
	}
	.status_nav {
		width:100vw;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
	}
	
	.backClass {
		background-color: #fff!important;
	}
	//  自定也首页顶部导航
	.Index_tab_top {
		z-index: 3;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		.scan-box {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 4rpx;
			}
		
			view {
				margin-left: 15rpx;
			}
		}
		.title {
			width: 200rpx;
			text-align: center;
			position: absolute;
			left: 50%;margin-left: -100rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
	}


  .information{
		margin: 20rpx 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.img{
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}
			.detail{
				padding-left: 16rpx;
				.name{
					font-weight: bold;
					font-size: 40rpx;
					color: #333333;
				}
				.desc{
					font-size: 22rpx;
					color: #333333;
					padding-top: 8rpx;
				}
			}
		}
		.right{
			font-size: 30rpx;
			color: #333333;
			position: relative;
			button{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
	
	.member{
		margin: 28rpx 22rpx 0;
		height: 302rpx;
		position: relative;
		.member_img{
			width: 100%;
			height: 100%;
		}
		.member_box{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			.men_top{
				margin: 0 32rpx 0 40rpx;
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.img{
						width: 40rpx;
						height: 38rpx;
					}
					.name{
						font-weight: bold;
						font-size: 34rpx;
						color: #EECC99;
						padding-left: 12rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.btn{
						width: 136rpx;
						height: 56rpx;
						background: linear-gradient( 270deg, #EECC9A 0%, #FEEAD8 100%);
						border-radius: 122rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.btn:nth-child(1){
						margin-right: 18rpx;
					}
				}
			}
			.xhx{
				width: 616rpx;
				height: 4rpx;
				background: rgba(255,255,255,0.3);
				border-radius: 8rpx;
				margin: 26rpx 46rpx 0 48rpx;
			}
			.cen{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-weight: bold;
					font-size: 24rpx;
					color: #EECC99;
					margin: 20rpx 0 0 48rpx;
				}
				.right{
					width: 136rpx;
					height: 47rpx;
					background: linear-gradient( 270deg, #EECC9A 0%, #FEEAD8 100%);
					border-radius: 122rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
					    margin: 19rpx 20rpx 0 0;
				}
			}
			.bot{
				margin: 35rpx 20rpx 0 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
				.right{
					width: 136rpx;
					height: 56rpx;
					background: linear-gradient( 270deg, #EECC9A 0%, #FEEAD8 100%);
					border-radius: 122rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
	
	
	.nonmember{
		margin: 28rpx 22rpx 0;
		height: 458rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		.module{
			height: 20rpx;
		}
		.privilege{
			width: 666rpx;
			height: 340rpx;
			background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
			border-radius: 20rpx;
			border: 2rpx solid rgba(255,182,182,0.3);
			margin: auto;
			.privilege_box{
				padding: 24rpx 0 0;
				.above{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					.left{
						display: flex;
						align-items: center;
						.name{
							font-weight: bold;
							font-size: 32rpx;
							color: #242321;
						}
						.desc{
							font-size: 20rpx;
							color: #310D09;
							padding-left: 14rpx;
						}
					}
					.right{
						width: 234rpx;
						height: 56rpx;
						background: linear-gradient( 270deg, #FC9729 0%, #FF2125 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255,45,41,0.28), inset 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,0.5);
						border-radius: 42rpx;
						
						font-weight: bold;
						font-size: 26rpx;
						color: #FFFFFF;
						position: relative;
						.right_btn{
							width: 234rpx;
							height: 56rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						button {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							opacity: 0;
						}
					}
				}
				.below{
					display: flex;
					align-items: center;
					padding: 8rpx 12rpx 0 14rpx;
					justify-content: space-between;
					.left{
						.item{
							width: 252rpx;
							height: 72rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							margin-bottom: 11rpx;
							.item_box{
								padding: 10rpx 12rpx 0 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.img{
								width: 56rpx;
								height: 56rpx;
								border-radius: 50%;
							}
							.text{
								flex: 1;
								font-weight: 500;
								font-size: 20rpx;
								color: #310D09;
								padding-left: 12rpx;
							}
						}
						.item:nth-child(3){
							margin-bottom: 0;
						}
					}
					.right{
						width: 372rpx;
						height:238rpx;
						// outline: 1rpx solid #000;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.plat_swiper{
							width: 372rpx;
							height:238rpx;
							.swiper-item {
								width: 100%;
								height: 238rpx;
								.b_box {
									width: 100%;
									height: 238rpx;
									display: flex;
									align-items: center;
									justify-content: space-between;
							}
						}
					}
						.item{
							width: 182rpx;
							height:238rpx;
							position: relative;
							.bg_img{
								width: 182rpx;
								height:238rpx;
							}
							.item_box{
								position: absolute;
								top: 0;
								left: 0;
								margin: 0 auto;
								width: 182rpx;
								height:238rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								.mk{
									height: 8rpx;
								}
								.shop{
									width: 168rpx;
									height: 184rpx;
									background: #FFFFFF;
									border-radius: 12rpx;
									display: flex;
									flex-direction: column;
									align-items: center;
									will-change: transform; /* 提示浏览器优化渲染 */
									.img{
										width: 152rpx;
										height: 126rpx;
										padding-top: 12rpx;
										border-radius: 8rpx;
									}
									.name{
										padding-top: 4rpx;
										font-weight: bold;
										font-size: 22rpx;
										color: #322C2C;
										white-space: normal;
										    will-change: transform; /* 提示浏览器优化渲染 */
									}
								}
								.free{
									width: 168rpx;
									text-align: center;
									position: absolute;
									bottom: 0;
									left: 0;
									// font-weight: bold;
									font-size: 24rpx;
									color: #FFFFFF;
									will-change: transform; /* 提示浏览器优化渲染 */
								}
							}
						}
					}
				}
			}
			
		}
		.mer_banner{
			width: 100%;
			height: 74rpx;
			background: linear-gradient( 180deg, #FFFBF9 0%, #FFF1F0 100%);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			.left{
				width: 61rpx;
				height: 36rpx;
				margin-left: 32rpx;
			}
			.right{
				swiper {
					width: 414rpx;
					height: 48rpx;
					swiper-item {
						width: 100%;
						height: 92rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						.img{
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
						}
						.fot_rtext{
							font-size: 24rpx;
							color: #383332;
							padding-left: 14rpx;
							word-break: break-all;
							white-space: pre-wrap;
							word-wrap: break-word;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							width: 312rpx;
						}
					}
				}
			}
		}
	}
	
	.order{
		margin: 18rpx 18rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		.order_box{
			padding: 24rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.item{
				width: 200rpx;
				height: 174rpx;
				background: linear-gradient( 180deg, rgba(255,239,238,0.45) 0%, #FFF7F5 100%);
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.item_top{
					display: flex;
					align-items: center;
					padding-top: 18rpx;
					.img{
						width: 26rpx;
						height: 28rpx;
					}
					.name{
						font-family: PingFangSC, PingFang SC;
						font-weight: bold;
						font-size: 22rpx;
						color: #333333;
						padding-left: 12rpx;
					}
				}
				.item_bot{
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 44rpx;
					color: #333333;
					padding: 8rpx 0 10rpx 0;
				}
				.item_fot{
					font-weight: 400;
					font-size: 24rpx;
					color: #B1B1B1;
				}
			}
		}
	}
	
	.activate{
		margin: 20rpx 18rpx 0;
		border-radius: 20rpx;
		height: 160rpx;
		position: relative;
		.img{
			width: 100%;
			height: 160rpx;
		}
		button{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}
	
	.feature{
		margin: 20rpx 18rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		.feature_box{
			padding: 16rpx 40rpx 16rpx 40rpx;
			.item{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.img{
						width: 40rpx;
						height: 40rpx;
					}
					.name{
						padding-left: 14rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}
				.right{
					width: 11rpx;
					height: 18rpx;
				}
			}
		}
	}
	
}
</style>
